# CSS变量:原生样式复用方案
CSS变量(也称为CSS自定义属性)是现代CSS中强大的样式复用工具,它让我们能够像编程语言那样定义和复用样式值,极大地提升了CSS的可维护性和灵活性。
## 一、什么是CSS变量?
CSS变量是CSS中可重复使用的值,通过自定义属性语法定义(`--*`前缀),并使用`var()`函数引用。与传统CSS预处理器(如Sass、Less)的变量不同,CSS变量是浏览器原生支持的,具有动态特性。
```css
:root {
--primary-color: #4285f4;
--spacing-unit: 8px;
}
.button {
background-color: var(--primary-color);
padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
}
```
## 二、CSS变量的核心优势
1. **动态更新**:通过JavaScript实时修改变量值
2. **层级继承**:遵循CSS层叠规则,可局部覆盖
3. **浏览器原生**:无需预编译,直接运行
4. **响应式设计**:与媒体查询完美配合
## 三、CSS变量的实际应用场景
### 1. 主题切换实现
```css
:root {
--bg-color: #fff;
--text-color: #333;
}
[data-theme="dark"] {
--bg-color: #222;
--text-color: #eee;
}
body {
background: var(--bg-color);
color: var(--text-color);
transition: background 0.3s, color 0.3s;
}
```
### 2. 动态间距系统
```css
:root {
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
}
.card {
padding: var(--space-md);
margin-bottom: var(--space-lg);
}
```
### 3. 复杂计算简化
```css
:root {
--base-size: 16px;
}
h1 {
font-size: calc(var(--base-size) * 2);
}
.container {
width: calc(100vw - var(--base-size) * 4);
}
```
## 四、JavaScript交互控制
CSS变量最大的优势是可以与JavaScript动态交互:
```javascript
// 设置变量值
document.documentElement.style.setProperty('--primary-color', '#ff0000');
// 读取变量值
const primaryColor = getComputedStyle(document.documentElement)
.getPropertyValue('--primary-color');
```
## 五、CSS变量最佳实践
1. **命名规范**:使用语义化命名(如`--color-primary`而非`--red`)
2. **定义位置**:在`:root`中定义全局变量,在特定组件中定义局部变量
3. **备用值**:使用`var(--my-var, default-value)`语法提供回退方案
4. **单位处理**:将单位包含在变量值中(`--spacing: 8px`而非`--spacing: 8`)
## 六、浏览器兼容性考虑
CSS变量在现代浏览器中得到了广泛支持(IE除外)。对于需要支持旧版浏览器的项目:
```css
.button {
background: #4285f4; /* 备用值 */
background: var(--primary-color, #4285f4);
}
```
## 结语
CSS变量为前端开发带来了全新的样式管理方式,从简单的颜色定义到复杂的主题系统,再到与JavaScript的动态交互,它已经成为现代CSS不可或缺的一部分。掌握CSS变量将显著提升你的样式开发效率和可维护性。
**小技巧**:在开发工具中查看CSS变量时,Firefox开发者工具会显示变量的定义位置,非常实用!